<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset1.css">
    <link rel="stylesheet" href="../static/css/swiper-bundle.min.css">


</head>

<body>
    <header class="el-header">
        <div class="bancen">
            <div class="log-boxd">
                <div class="log-box"><img src="https://www.philips.com.cn/c-etc/philips/clientlibs/foundation-general/clientlibs-css-rb2014/images/generic/wordmark_1x.svg" alt=""></div>
            </div>
            <div class="search-box">
                <span class="search"><img src="../static/img/ff.png" alt=""></span>
                <input autofocus="autofocus" placeholder="您在寻找什么?">
                <span class="close"><img src="../static/img/clo.png" alt=""></span>
            </div>
            <div class="user-info">
                <span class="car"><img src="../static/img/c.png" alt=""></span>
                <span class="login"><img src="../static/img/g.png" alt=""></span>
                <span class="serch"><img src="../static/img/f.png" alt=""></span>
                <ul class="godl">
                    <span></span>
                    <li class="dddd">登录</li>
                    <li class="zzzz">注册</li>
                </ul>
            </div>
            <ul class="one-category">
                <li class="ind"><span>首页</span></li>
                <li><span class="mouth"> 口腔护理</span></li>
                <li><span class="man"> 男士理容</span></li>
                <li><span class="hairdressing"> 美容美体</span></li>
                <li><span class="baby"> 母婴护理</span></li>
                <li><span class="gauze"> 新风口罩</span></li>
                <li><span class="accessory"> 附件</span></li>
            </ul>

        </div>

        <div class="classify">
            <div class="bancen">
                <ul class=" mouth">
                    <li class=""><span> 口腔护理</span></li>
                    <li class=""><span> 电动洁牙器</span></li>
                    <li class=""><span> 护理套组</span></li>
                    <li class=""><span> 电动牙刷附件</span></li>
                </ul>

                <ul class="man">
                    <li class=""><span> 男士理容</span></li>
                    <li class=""><span> 理发和面部造型器</span></li>
                    <li class=""><span> 面部肌肤和美体护理</span></li>
                </ul>
                <ul class="hairdressing">
                    <li class=""><span> 美容美体</span></li>
                    <li class=""><span> 身体护理</span></li>
                    <li class=""><span>护发美肌</span></li>
                </ul>
                <ul class="baby">
                    <li class=""><span> 母婴护理</span></li>
                    <li class=""><span> 温奶器和消毒锅</span></li>
                    <li class=""><span> 养套装和辅食料理</span></li>
                    <li class=""><span> 喂奶瓶和奶嘴</span></li>
                </ul>
                <ul class="gauze">
                    <li class=""><span>电动新风新风口罩</span></li>
                    <li class=""><span> 替换滤芯</span></li>
                </ul>

                <ul class="accessory">
                    <li class=""><span>肤护理附件 </span></li>
                    <li class=""><span> 肌剃须刀附件</span></li>

                </ul>
            </div>
        </div>
    </header>

    <section>
        <ul class="leftbtn">
            <li class="xapp">

                <span>清洁口腔</span>
            </li>
            <li class="seaver">

                <span>男士理荣</span>
            </li>
            <li class="person">

                <span>面部清洁</span>
            </li>
            <li goshop>

                <span>婴儿用品</span>
            </li>



        </ul>
        <ul class="rightbtn">
            <li class="xapp">
                <img src="../static/img/r1.png" alt="">
                <span>小程序</span>
            </li>
            <li class="seaver">
                <img src="../static/img/r2.png" alt="">
                <span>售后服务</span>
            </li>
            <li class="person">
                <img src="../static/img/r3.png" alt="">
                <span>人工客服</span>
            </li>
            <li goshop>
                <img src="../static/img/r4.png" alt="">
                <span>购物车</span>
            </li>

            <li goback>
                <img src="../static/img/r5.png" alt="">
                <span>回到顶部</span>
            </li>

        </ul>

        <!-- <div class="swiper-container container1">
            <div class="swiper-wrapper">
                <div class="swipper-slide"><img src="https://philips-shop-uat.oss-cn-shanghai.aliyuncs.com/philips/product/1eed680f1ae34c1d9d5c1c2a292b8ac5.jpg?Expires=1924759086YqFckxbinDb6c5U5m5ENnnaFPAo%3D" alt=""></div>
                <div class="swipper-slide"><img src="https://philips-shop-uat.oss-cn-shanghai.aliyuncs.com/philips/product/5a11014e05714353b11e77ccb39d99d4.jpg?Expires=1930723335FG897ASftKwDSqVvbu8bZoLlmy0%3D" alt=""></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div> -->
        <!-- 轮播图 -->
        <div class="container">
            <div class="wrapper">
                <div class="slide">
                    <img src="https://philips-shop-uat.oss-cn-shanghai.aliyuncs.com/philips/product/1eed680f1ae34c1d9d5c1c2a292b8ac5.jpg?Expires=1924759086YqFckxbinDb6c5U5m5ENnnaFPAo%3D" alt="">
                </div>
                <div class="slide">
                    <a href="./activity.html">
                        <img src="https://philips-shop-uat.oss-cn-shanghai.aliyuncs.com/philips/product/5a11014e05714353b11e77ccb39d99d4.jpg?Expires=1930723335FG897ASftKwDSqVvbu8bZoLlmy0%3D" alt=""></a>
                </div>
                <!-- <div class="slide">
                    <img src="https://f0.mall.tcl.com/FsJUX7wkFP3ni3lu_Wc3E0nw4tDn" alt="">
                </div>
                <div class="slide">
                    <img src="https://f0.mall.tcl.com/FkbvUlPgf7K7ni_v0LDhQguSsLS2" alt="">
                </div> -->
                <!-- <div class="slide">
                    <img src="https://f0.mall.tcl.com/FnT11gc3ah5G2YY-q379JRW5fWfo" alt="">
              </div> -->
            </div>
            <div class="button-next"></div>
            <div class="button-prev"></div>
            <div class="pagination">
                <span class="active"></span>
                <span></span>
                <!-- <span></span>
                <span></span> -->
            </div>
        </div>
        <div class="tp">
            <img src="https://philips-shop-uat.oss-cn-shanghai.aliyuncs.com/philips/product/78957bbd9e794b42b7f94ec269703211.jpg?Expires=19218228093EAOvUtvNHeWn%2BxG%2Bm3yXhDQy6A%3D" alt="">
        </div>
        <div class="congoods bancen">
            <p>清洁口腔</p>
            <div class="good1 box">
            </div>
        </div>
        <div class="tp"><img src="https://philips-shop-uat.oss-cn-shanghai.aliyuncs.com/philips/product/ba98486abf714c09b5a9a85520cae98c.jpg?Expires=1921458391r7kHPNUVqEBcxBwo4P%2F%2B%2BBJhJ1s%3D" alt=""></div>
        <div class="congoods bancen">
            <p>男士理荣</p>
            <div class="good2 box"></div>

        </div>

        <div class="tp"><img src="https://philips-shop.oss-cn-shanghai.aliyuncs.com/philips/product/3eed636076224359ae4c7b70ea63cab0.jpg?Expires=1908854685VCR4DCtpGkS%2BkFUfuEp53WHudCA%3D" alt=""></div>
        <div class="congoods bancen">
            <p>面部清洁</p>
            <div class="good3 box"></div>
        </div>

        <div class="tp"><img src="https://philips-shop.oss-cn-shanghai.aliyuncs.com/philips/product/f219a5da8ae3409fbef9c571c3c97586.jpg?Expires=1908854855WqVXrHFC1jeQEKmDtM5WaGNrEk8%3D" alt=""></div>
        <div class="congoods bancen">
            <p>婴儿用品</p>
            <div class="good4 box"></div>
        </div>

    </section>


    <footer>
        <div data-v-1d10dfb1="" class="footer">

            <div data-v-1d10dfb1="" class="store-list width">
                <div data-v-1d10dfb1="" class="store-list-content">
                    <dl data-v-1d10dfb1="">
                        <dt data-v-1d10dfb1="">在线帮助</dt>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/question?id=anchor0" class="">常见问题</a></dd>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="http://www.support.philips.com/support/contact/contact_page.jsp;jsessionid=41A74C2E0BB62740DDDEAFF780BA5698.app106-drp1?userCountry=cn&amp;userLanguage=zh" target="_blank">联系我们</a></dd>
                    </dl>
                    <dl data-v-1d10dfb1="">
                        <dt data-v-1d10dfb1="">订单说明</dt>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/howbuy?id=getStart" class="">如何订购</a></dd>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/order-delivery?id=orderState" class="">订单状态</a></dd>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/order-query?id=accountManager" class="">订单查询</a></dd>
                    </dl>
                    <dl data-v-1d10dfb1="">
                        <dt data-v-1d10dfb1="">支付方式</dt>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/pay-type?id=weChat" class="">微信</a></dd>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/pay-type?id=aliPay" class="">支付宝</a></dd>
                    </dl>
                    <dl data-v-1d10dfb1="">
                        <dt data-v-1d10dfb1="">货物配送</dt>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/order-delivery?id=orderSend" class="">配送时间</a></dd>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/order-delivery?id=orderGet" class="">商品验货与签收</a></dd>
                    </dl>
                    <dl data-v-1d10dfb1="">
                        <dt data-v-1d10dfb1="">售后服务</dt>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/sale-after?id=changeRole" class="">退换货政策</a></dd>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/sale-after?id=changeProgress" class="">退换货流程</a></dd>
                        <dd data-v-1d10dfb1=""><a data-v-1d10dfb1="" href="#/sale-after?id=changeRole" class="">7天无理由退换</a></dd>
                    </dl>
                    <dl data-v-1d10dfb1="" class="border0">
                        <dt data-v-1d10dfb1="">服务热线</dt>
                        <dd data-v-1d10dfb1="">飞利浦官网<br data-v-1d10dfb1="">400-880-0008</dd>
                    </dl>
                </div>
            </div>
            <div data-v-1d10dfb1="" class="warp-bottom">
                <div data-v-1d10dfb1="" class="footer_logo width">
                    <div data-v-1d10dfb1="" class="footer_logo_left">
                        <h3 data-v-1d10dfb1="" class="p-body-copy-02">连接至飞利浦</h3>
                        <div data-v-1d10dfb1="" style="display: flex; align-items: center;"><a data-v-1d10dfb1="" href="https://www.philips.com.cn/myphilips/myphilips-wechat.html" target="_blank"><i
                                    data-v-1d10dfb1="" class="iconfont icon-weixin"></i></a> <a data-v-1d10dfb1="" href="http://weibo.com/onesmallstep" target="_blank" style="margin-left: 10px; margin-top: 2px;"><i data-v-1d10dfb1=""
                                    class="iconfont icon-xinlang"></i></a></div>
                    </div>
                    <div data-v-1d10dfb1="" class="footer_logo_center"><img data-v-1d10dfb1="" src="">
                    </div>
                    <div data-v-1d10dfb1="" class="footer_logo_right"><a data-v-1d10dfb1="" target="_blank" href="https://www.philips.com.cn/">跳转飞利浦官网</a></div>
                </div>
                <ul data-v-1d10dfb1="" class="p-grid">
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="#/terms" class=""><span
                                data-v-1d10dfb1="" class="p-text">会员服务协议</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="#/notice" class=""><span
                                data-v-1d10dfb1="" class="p-text">会员规则</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="https://www.careers.philips.com/cn/zh" target="_blank"><span data-v-1d10dfb1=""
                                class="p-text">招贤纳士</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="http://www.support.philips.com/support/contact/contact_page.jsp?userLanguage=zh&amp;userCountry=cn" target="_blank"><span data-v-1d10dfb1="" class="p-text">联系飞利浦</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="https://www.philips.com.cn/a-w/site-owner.html" target="_blank"><span
                                data-v-1d10dfb1="" class="p-text">Philips</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="#/privacy" class=""><span
                                data-v-1d10dfb1="" class="p-text">隐私权声明</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="https://www.philips.com.cn/a-w/cookie-notice.html" target="_blank"><span
                                data-v-1d10dfb1="" class="p-text">Cookie 政策</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="https://www.philips.com.cn/a-w/terms-of-use.html" target="_blank"><span
                                data-v-1d10dfb1="" class="p-text">使用条款</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="https://www.philips.com.cn/a-w/security.html" target="_blank"><span data-v-1d10dfb1=""
                                class="p-text">产品安全</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="http://www.beian.miit.gov.cn/publish/query/indexFirst.action" target="_blank"><span
                                data-v-1d10dfb1="" class="p-text">沪ICP备09062110号</span></a></li>
                    <li data-v-1d10dfb1="" class="p-grid-item"><a data-v-1d10dfb1="" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010602001824" target="_blank"><span data-v-1d10dfb1="" class="p-text">沪公网安备31010602001824号</span></a></li>
                </ul>
                <p data-v-1d10dfb1="" style="color: rgb(179, 200, 230); line-height: 22px;">© Koninklijke Philips N.V.，2018 - 2022。保留所有权利。</p>
            </div>
        </div>


    </footer>
    <!-- 轮播图 -->
    <script>
        // 轮播图的核心就是左右切换按钮，实现显示元素下标的改变; 
        var index = 0;
        var prev = 0;

        var next_btn = document.querySelector(".button-next");
        var prev_btn = document.querySelector(".button-prev");
        var slides = document.querySelectorAll(".slide");
        var wrapper = document.querySelector(".wrapper");
        // 自动播放的阻止功能是在鼠标移入container容器之中就触发的; 
        var container = document.querySelector(".container");

        var bullets = document.querySelectorAll(".pagination span");

        // 绑定事件 
        // - 轮播图改变下标功能必须设置边界; 
        function bindEvent() {
            next_btn.onclick = function() {
                add();
                bannerAnimate();
            }
            prev_btn.onclick = function() {
                reduce()
                bannerAnimate();
            }
            container.onmouseover = function() {
                stop();
            }
            container.onmouseout = function() {
                autoPlay();
            }

            bullets.forEach(function(ele, i) {

                ele.onmouseover = function() {
                    prev = index;
                    // 防止穿帮逻辑; 
                    // - 如果在假的第0张图片上(在最后一张图片上)
                    // - 我们先让真假图片呼喊然后在进行元素的动画效果; 
                    if (index === 2) {
                        wrapper.style.left = 0;
                    }
                    index = i;
                    bannerAnimate();
                }
            })
        }

        function add() {

            prev = index;

            if (index === slides.length - 1) {
                wrapper.style.left = 0;
                index = 1;
            } else {
                index++;
            }
        }

        function reduce() {
            prev = index;

            if (index === 0) {
                wrapper.style.left = -(slides.length - 1) * 1519 + "px";
                index = slides.length - 2;
            } else {
                index--;
            }
        }

        function bannerAnimate() {
            animate(wrapper, {
                left: -index * 1519
            });

            // 给对应的分页器按钮添加active; 

            // 先去清空所有的类名; 

            bullets.forEach(function(ele) {
                ele.classList.remove("active")
            })

            // 下标需要进行特殊处理，在显示最后一张图片的时候，给第0个按钮添加active; 

            bullets[index === 3 ? 0 : index].classList.add("active");
        }
        bindEvent();

        var interval = null;

        function autoPlay() {
            // 间隔3s，让js点击一下下一页按钮; 
            interval = setInterval(function() {
                // 虚拟点击 : 
                next_btn.dispatchEvent(new Event("click"));
            }, 3000)
        }

        function stop() {
            clearInterval(interval)
        }

        autoPlay();





        //固定div滑动效果
        // $(window).scroll(function() {
        //     var h = $(this).scrollTop(); //获得滚动条距top的高度
        //     //alert(h); 
        //     if (h > 750 && h < 4800) {
        //         $("#float_nav").fadeIn();
        //     } else {
        //         $("#float_nav").fadeOut();
        //     }
        // });
    </script>



    <script src="../static/javascripts/jQuery.js"></script>
    <script src="../static/javascripts/utils.js"></script>

    <script src="./javascripts/reset.js"></script>
    <!-- <script src="../static/javascripts/swiper-bundle.min.js"></script> -->
    <script src="../static/javascripts/axios.js"></script>
    <script src="./javascripts/index.js"></script>


</body>

</html>